<!-- 个人信息 -->
<template>
    <view>
        <view class="cu-form-group margin-top">
            <view class='title'>姓名<text class="text-red">*</text></view>
            <input v-model="infoParam.name" placeholder="请输入真实姓名,用于投递职位" class='radius' name='input'></input>
        </view>
        <view class="cu-form-group justify-start">
            <view class='title'>性别<text class="text-red">*</text></view>
            <radio-group class="block text-left" @change="sexChange">
                <radio class='orange' value="male" :checked="infoParam.sex === 'male'"></radio> 男
                <radio class='orange margin-left' value="female" :checked="infoParam.sex === 'female'"></radio> 女
            </radio-group>
        </view>
        <view class="cu-form-group justify-start">
            <view class='title'>职业</view>
            <radio-group class="block text-left" @change="professionChange">
                <radio class='orange' value="student" :checked="infoParam.profession === 'student'"></radio> 学生
                <radio class='orange margin-left' value="social" :checked="infoParam.profession === 'social'"></radio> 社会银
            </radio-group>
        </view>
        <view class="cu-form-group">
            <view class='title'>学历</view>
            <picker 
                class="flex-sub align-center"
                @change="educationPickerChange" 
                :range="educationList" 
                range-key="val"
            >
                <view class="education-picker-content">
                    {{ choosedEducation.val ? choosedEducation.val : '请选择...' }}
                </view>
            </picker>
        </view>
        <view class="cu-form-group">
            <view class='title'>出生日期</view>
            <picker 
                mode="date"
                class="flex-sub align-center"
                @change="birthPickerChange"
            >
                <view class="education-picker-content">
                    {{ infoParam.birth ? infoParam.birth : '请选择...' }}
                </view>
            </picker>
        </view>
        <view class="cu-form-group">
            <view class='title'>学校</view>
            <input v-model="infoParam.school" placeholder="请输入学校名称" class='radius' name='input'></input>
        </view>
        <view class="cu-form-group">
            <view class='title'>手机号<text class="text-red">*</text></view>
            <input v-model="infoParam.phone" placeholder="请输入11位手机号码" class='radius' name='input'></input>
        </view>

        <view class="cu-bar margin-top btn-group submit-btn">
            <button v-if="isFromDelivery" @click="submitDelivery" class='cu-btn bg-orange shadow-blur round lg'>提交报名</button>
            <button v-else @click="submitInfo" class='cu-btn bg-orange shadow-blur round lg'>保存信息</button>
        </view>
    </view>
</template>

<script>
import store from '@/store';
import {
    getUserInfoRemote,
    updateUserInfo,
    submitDelivery
} from './model/result.model';

export default {
    data () {
        return {
            isFromDelivery: false,
            jobId: '',
            educationList: [
                {key: 'doctor', val: '博士'},
                {key: 'master', val: '硕士'},
                {key: 'undergraduate', val: '本科'},
                {key: 'juniorCollege', val: '大专'},
                {key: 'others', val: '其他'}
            ],
            choosedEducation: {},
            infoParam: { // userId name sex profession education birth school phone
                userId: '',
                name: '',
                sex: '',
                profession: '',
                education: '',
                birth: '',
                school: '',
                phone: '',
                time: Date.now()
            }
        };
    },
    onLoad (option) {
        if(!this.$store.state.userInfo.userId) {
            wx.redirectTo({
                url: '/pages/start/main'
            })
        }
        if(option.action && option.action === 'delivery') {
            this.jobId = option.jobId;
            this.isFromDelivery = true;
        } else {
            this.isFromDelivery = false;
        }
        wx.setNavigationBarTitle({     
            title: "个人信息"
        })
        this.infoParam.userId = this.$store.state.userInfo.userId;
        this.initInfoTable();
    },
    onPullDownRefresh() {
        wx.showNavigationBarLoading(); // 显示顶部刷新图标
        this.initInfoTable();
    },
    computed: {
        userInfoFromWx() { // 用户授权信息 gender 0未知 1男 2女
            return this.$store.state.userInfoFromWx || {};
        },
        userInfoRemote() {
            return this.$store.state.userInfo.info || {};
        },
    },
    methods: {
        initInfoTable() {
            getUserInfoRemote({
                userId: this.$store.state.userInfo.userId
            }).then(()=>{
                wx.hideNavigationBarLoading(); // 隐藏导航栏加载框
                wx.stopPullDownRefresh(); // 停止下拉动作
                this.educationList.map((item)=>{
                    if(item.key === this.userInfoRemote.education) {
                        this.choosedEducation = item;
                    }
                })
                this.infoParam = {
                    ...this.infoParam,
                    ...this.userInfoRemote,
                    userId: this.$store.state.userInfo.userId,
                };
            })
        },
        sexChange(e) {
            this.infoParam.sex = e.target.value;
        },
        professionChange(e) {
            this.infoParam.profession = e.target.value;
        },
        educationPickerChange(e) {
            let index = (+e.target.value);
            this.choosedEducation = this.educationList[index];
            this.infoParam.education = this.choosedEducation.key;
        },
        birthPickerChange(e) {
            this.infoParam.birth = e.target.value;
        },
        checkInfo() { // 校验必填项
            if(!this.infoParam.name || !this.infoParam.sex || !this.infoParam.phone) {
                wx.showModal({
                    title: '提示',
                    showCancel: false,
                    content: '姓名、性别、手机号为必填项!',
                })
                return false;
            }
            return true;
        },
        submitDelivery() { // 提交职位报名
            if(!this.checkInfo()) {
                return;
            }
            updateUserInfo(this.infoParam); // 向服务端更新下信息
            // userid name sex profession education birth school phone jobid time
            submitDelivery({ 
                ...this.infoParam,
                jobId: this.jobId
            }).then((res)=>{
                wx.showToast({
                    title: res.message
                })
                $_timer2 = setTimeout(function () {
                    wx.navigateBack({
                        delta: 1
                    })
                }, 2000);
            })

        },
        submitInfo() { // 保存用户信息
            if(!this.checkInfo()) {
                return;
            }
            updateUserInfo(this.infoParam).then((res)=>{
                wx.showToast({
                    title: res.message
                })
                $_timer1 = setTimeout(function () {
                    this.initInfoTable();
                }.bind(this), 2000);
            })
        }
    },
    beforeDestroy () {
        clearTimeout($_timer1);
        clearTimeout($_timer2);
    }
}

</script>
<style lang='less' scoped>
.title {
    width: 25%;
}
.submit-btn {
    background: #f1f1f1;
}
</style>